<template>
  <div class="pay-order">
    <!-- 顶部导航 -->
    <TopNav />
    <div class="pay-container">
      <div class="top-content">
        <div class="top-header">
          <a href="./">
            <img src="../../assets/imgs/search/jd_logo.png" alt="京东 logo">
          </a>
          <a href="#none">
            <h3>结算页</h3>
          </a>
        </div>
        <div class="line-step">
          <el-steps :active="1" finish-status="success" align-center>
            <el-step title="1.我的购物车" description="已完成"></el-step>
            <el-step title="2.填写核对订单信息" description="当前"></el-step>
            <el-step title="3.成功提交订单" description="未完成"></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <!-- 设置送货地址、支付方式等信息 -->
     <SendSettings/>
    <!-- 底部导航 -->
    <FooterView />
  </div>
</template>

<script setup>
import TopNav from '../home/components/TopNav.vue'
import FooterView from '@/components/Footer/FooterView.vue'
import SendSettings from './components/SendSettings.vue'
</script>

<style scoped lang="scss">
.pay-order {
  height: 100vh;
  width: auto;

  .pay-container {
    width: 100%;
    padding: 0 20px;

    .top-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      padding: 20px 0;
    }

    .top-header {
      display: flex;
      align-items: center;

      img {
        width: 134px;
        height: 42px;
      }

      a {
        height: 40px;
        line-height: 40px;
        text-decoration: none;
        margin-left: 20px;

        h3 {
          color: rgb(121, 121, 121);
          font-weight: 700;
          margin: 0;
        }
      }
    }

    .line-step {
      flex: 1;
      margin-left: 40px;
    }
  }
}

// // 以下样式用于修改Element UI步骤条的颜色
// :deep(.el-step.is-success .el-step__head ) {
//   background-color: #52c41a; /* 绿色 */
//   border-color: #52c41a;
// }

// :deep(.el-step.is-success .el-step__line-inner) {
//   background-color: #52c41a; /* 已完成步骤的连接线绿色 */
// }

// :deep(.el-step.is-success .el-step__title ){
//   color: #52c41a; /* 已完成步骤标题绿色 */
// }</style>
